<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">投诉列表</p>
      </div>

      <el-tabs v-model="nowShow" @tab-change="changListType">
        <el-tab-pane label="我被投诉" name="1"> </el-tab-pane>
        <el-tab-pane label="我要投诉" name="2"> </el-tab-pane>
      </el-tabs>
      <!-- /*/*/*/*/*/*/*/*/*/*/*  我被投诉  /*/*/*/*/*/*/*/*/*/*/* -->
      <div style="width: 100%; height: calc(100% - 120px)" v-show="nowShow == '1'">
        <!-- 搜索 -->
        <div class="g-search" ref="searchBox">
          <!-- 时间选择区域 -->
          <span class="demonstration">提交时间：</span>
          <el-date-picker
            v-model="searchValue.startAt"
            type="date"
            placeholder="开始时间"
            @change="startTime"
            :clearable="false"
            :default-time="defaultTime(0, 0, 0)" />
          <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
            >至</span
          >
          <el-date-picker
            v-model="searchValue.endAt"
            type="date"
            placeholder="结束时间"
            @change="endTime"
            :clearable="false"
            :default-time="defaultTime1(23, 59, 59)" />
          <el-radio-group v-model="radio" class="ml-4" @change="radioSelect" style="margin-left: 10px">
            <el-radio label="1" size="large">今天</el-radio>
            <el-radio label="2" size="large">昨天</el-radio>
            <el-radio label="3" size="large">近三天</el-radio>
            <el-radio label="4" size="large">近一周</el-radio>
            <el-radio label="5" size="large">近一个月</el-radio>
            <el-radio label="6" size="large">近三个月</el-radio>
            <el-radio label="7" size="large">近一年</el-radio>
          </el-radio-group>
          <!-- 信息区域 -->
          <div class="all_select">
            <!-- 订单编号 -->
            <div class="input_valye">
              <span class="demonstration">投诉类型：</span>
              <el-select
                v-model="searchValue.type"
                class="m-2"
                placeholder="请选择评价等级"
                style="width: 200px !important"
                @change="search">
                <el-option v-for="item in rating_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="input_valye">
              <span class="demonstration">投诉结果：</span>
              <el-select
                v-model="searchValue.status"
                class="m-2"
                placeholder="请选择评价等级"
                style="width: 200px !important"
                @change="search">
                <el-option v-for="item in result_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 底部按钮区域 -->
          <div class="bottom_btn">
            <el-button class="solid" @click="search">查询</el-button>
            <el-button class="hollow" @click="reset">重置</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table" style="padding: 20px">
          <!-- 表格区域 -->
          <el-table
            id="out-table"
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :show-overflow-tooltip="true"
            border>
            <el-table-column prop="id" label="投诉ID" align="center" />
            <el-table-column prop="type" label="投诉类型" align="center">
              <template #default="item">
                <span v-if="item.row.type == 0">商品投诉</span>
                <span v-else-if="item.row.type == 1">商家服务投诉</span>
                <span v-else-if="item.row.type == 2">商家承诺履行投诉</span>
                <span v-else="item.row.type == 3">其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="投诉原因" align="center" width="200" />
            <el-table-column prop="description" label="投诉详情" align="center"> </el-table-column>
            <el-table-column prop="createdAt" label="投诉时间" align="center" />
            <el-table-column prop="status" label="投诉结果" align="center">
              <template #default="item">
                <span v-if="item.row.status == 0">待处理</span>
                <span v-else-if="item.row.status == 1">处理中</span>
                <span v-else="item.row.status == 2">已完成</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class="operation">
              <template #default="item">
                <div class="table_btn">
                  <el-button size="small" class="none" @click="look(item.row)">查看</el-button
                  ><el-button
                    size="small"
                    class="none"
                    @click="appeal(item.row)"
                    v-if="item.row.appealStatus == 0"
                    :loading="loading"
                    :disabled="loading"
                    >申诉</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <smartPager
            v-model:current-page="searchValue.page"
            v-model:page-size="searchValue.rows"
            :total="total"
            @change="pageChange" />
        </div>
      </div>
      <!-- /*/*/*/*/*/*/*/*/*/*/*  我要投诉  /*/*/*/*/*/*/*/*/*/*/* -->
      <div style="width: 100%; height: calc(100% - 120px)" v-show="nowShow == '2'">
        <!-- 搜索 -->
        <div class="g-search" ref="searchBox">
          <!-- 时间选择区域 -->
          <span class="demonstration">提交时间：</span>
          <el-date-picker
            v-model="searchValue.startAt"
            type="date"
            placeholder="开始时间"
            @change="startTime"
            :clearable="false"
            :default-time="defaultTime(0, 0, 0)" />
          <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
            >至</span
          >
          <el-date-picker
            v-model="searchValue.endAt"
            type="date"
            placeholder="结束时间"
            @change="endTime"
            :clearable="false"
            :default-time="defaultTime1(23, 59, 59)" />
          <el-radio-group v-model="radio" class="ml-4" @change="radioSelect" style="margin-left: 10px">
            <el-radio label="1" size="large">今天</el-radio>
            <el-radio label="2" size="large">昨天</el-radio>
            <el-radio label="3" size="large">近三天</el-radio>
            <el-radio label="4" size="large">近一周</el-radio>
            <el-radio label="5" size="large">近一个月</el-radio>
            <el-radio label="6" size="large">近三个月</el-radio>
            <el-radio label="7" size="large">近一年</el-radio>
          </el-radio-group>
          <!-- 信息区域 -->
          <div class="all_select">
            <!-- 订单编号 -->
            <div class="input_valye">
              <span class="demonstration">投诉类型：</span>
              <el-select
                v-model="searchValue.type"
                class="m-2"
                placeholder="请选择评价等级"
                style="width: 200px !important">
                <el-option v-for="item in rating_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="input_valye">
              <span class="demonstration">投诉结果：</span>
              <el-select
                v-model="searchValue.status"
                class="m-2"
                placeholder="请选择评价等级"
                style="width: 200px !important">
                <el-option v-for="item in result_options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 底部按钮区域 -->
          <div class="bottom_btn">
            <el-button class="solid" @click="search">查询</el-button>
            <el-button class="hollow" @click="reset">重置</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="table" style="padding: 20px">
          <!-- 表格区域 -->
          <el-table
            id="out-table"
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :show-overflow-tooltip="true"
            border>
            <el-table-column prop="id" label="投诉ID" align="center" />
            <el-table-column prop="id" label="投诉对象" align="center" />
            <el-table-column prop="type" label="投诉类型" align="center">
              <template #default="item">
                <span v-if="item.row.type == 0">异常下单</span>
                <span v-else-if="item.row.type == 1">异常售后</span>
                <span v-else-if="item.row.type == 2">异常会话</span>
                <span v-else="item.row.type == 3">其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="投诉原因" align="center" width="200" />
            <el-table-column prop="description" label="投诉详情" align="center"> </el-table-column>
            <el-table-column prop="createdAt" label="投诉时间" align="center" />
            <el-table-column prop="status" label="投诉结果" align="center">
              <template #default="item">
                <span v-if="item.row.status == 0">待处理</span>
                <span v-else-if="item.row.status == 1">处理中</span>
                <span v-else="item.row.status == 2">已完成</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class="operation">
              <template #default="item">
                <div class="table_btn">
                  <el-button size="small" class="none" @click="look(item.row)">查看</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <smartPager
            v-model:current-page="searchValue.page"
            v-model:page-size="searchValue.rows"
            :total="total"
            @change="pageChange" />
        </div>
      </div>
    </div>
    <!-- 投诉查看 -->
    <div class="complaint" v-if="complaint">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff">
            <Edit /> </el-icon
          >&nbsp;投诉详情
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div class="tab_ul">
          <div class="tab_li">
            <div class="tab_tit" style="border-top: 1px solid #e4e7ed">投诉ID</div>
            <div class="tab_content" style="border-top: 1px solid #e4e7ed">&emsp;{{ lookMes.id }}</div>
          </div>
          <div class="tab_li">
            <div class="tab_tit">投诉类型</div>
            <div class="tab_content">&emsp;{{ lookMes.type }}</div>
          </div>
          <div class="tab_li">
            <div class="tab_tit">投诉原因</div>
            <div class="tab_content">&emsp;{{ lookMes.reason }}</div>
          </div>
          <div class="tab_li">
            <div class="tab_tit">投诉时间</div>
            <div class="tab_content">&emsp;{{ lookMes.createdAt }}</div>
          </div>
          <div class="tab_li">
            <div class="tab_tit" style="height: 150px; line-height: 150px">投诉详情</div>
            <div class="tab_content especial" style="height: 150px; overflow-y: scroll; padding: 10px">
              &emsp;{{ lookMes.description }}
              <div style="margin-top: 10px" v-if="lookMes.complaintImgs">
                <div v-if="lookMes.complaintImgs.length != 0">
                  <el-image
                    v-for="(item, index) in lookMes.complaintImgs"
                    :key="index"
                    :preview-src-list="[item]"
                    :src="item"
                    class="ph_b"
                    style="width: 100px; height: 100px" />
                </div>
              </div>
            </div>
          </div>
          <div class="tab_li">
            <div class="tab_tit">投诉结果</div>
            <div class="tab_content">&emsp;{{ lookMes.result }}</div>
          </div>
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
        </div>
      </div>
    </div>
    <!-- 投诉申诉 -->
    <div class="appeal" v-if="appealShow">
      <div class="title1">
        <div class="title_mes">
          <el-icon size="20" color="#fff">
            <Edit /> </el-icon
          >&nbsp;我要申诉
        </div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div style="height: 30px"></div>
        <el-form ref="ruleFormRef" :model="appealMes" label-width="120px" label-position="top"
          ><el-form-item label="投诉编号:" style="width: 100%">
            <el-input v-model="appealMes.complaintId" class="form_input" :disabled="true" />
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="投诉类型:" style="width: 100%">
            <el-select v-model="appealMes.type" class="m-2" :disabled="true">
              <el-option v-for="item in rating_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <el-input v-model="appealMes.type" class="form_input" /> -->
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="申诉原因:" style="width: 100%">
            <el-input v-model="appealMes.reason" class="form_input" maxlength="100" />
            <span id="input_hint"></span>
          </el-form-item>
          <el-form-item label="申诉详细说明:" style="width: 100%">
            <el-input
              v-model="appealMes.description"
              class="form_input"
              cols="30"
              rows="4"
              type="textarea"
              maxlength="250"
              show-word-limit />
            <span id="input_hint"></span>
          </el-form-item>
          <el-upload action="#" list-type="picture-card" :auto-upload="false" v-model:file-list="fileList1" :limit="30">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </el-form>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="appealSure">确定</el-button>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {RequestComplaintGetlistlimit, RequestComplaintGetDetail, RequestAppealSave} from '@/api/path/index.js';
import {Edit, Plus} from '@element-plus/icons-vue';
import moment from 'moment';
import {ElMessage} from 'element-plus';
const mask = ref(false);
const complaint = ref(false);
const shopId = localStorage.getItem('ShopId');

const nowShow = ref('1'); //当前展示 1表示被投诉 2表示我要投诉
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};

/**
 * 投诉类型选择器
 */
const rating_options = [
  {
    value: 0,
    label: '商品投诉',
  },
  {
    value: 1,
    label: '商家服务投诉',
  },
  {
    value: 2,
    label: '商家承诺履行投诉',
  },
  {
    value: 3,
    label: '其他',
  },
];
/**
 * 处理结果
 */
const result_options = [
  {
    value: 0,
    label: '待处理',
  },
  {
    value: 1,
    label: '处理中',
  },
  {
    value: 2,
    label: '已完成',
  },
];
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
/**
 * 分页
 */
const pageChange = async (val: number) => {
  console.log(val);
  getlistlimit();
};
// 挂载
onMounted(() => {
  getlistlimit();
  handleResize();
});
/**
 * 切换我要投诉和我被投诉
 */
const changListType = () => {
  console.log('当前展示', nowShow.value);
  // 0是商家投诉用户，1是用户投诉商家
  nowShow.value == '1' ? (searchValue.value.complaintType = 1) : (searchValue.value.complaintType = 0);
  getlistlimit();
};
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
};
onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
/**
 * 获取我被投诉的列表
 */
const getlistlimit = async () => {
  const a = await RequestComplaintGetlistlimit(searchValue.value);
  tableData.value = a.resultObj.list;
  total.value = a.resultObj.count;
  console.log('获取成功', tableData.value);
};
// 搜索参数
const searchValue = ref({
  shopId: shopId,
  type: '',
  status: '',
  startAt: '',
  endAt: '',
  page: 1,
  rows: 10,
  complaintType: 0,
});
/**
 * 时间范围单选按钮
 */

const radio = ref();
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '4') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '5') {
    searchValue.value.startAt = moment(now).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '6') {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
  }
  search();
};
// 开始时间
const startTime = () => {
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
// 结束时间
const endTime = () => {
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  radio.value = '0';
  search();
};
/**
 * 搜索
 */
const search = async () => {
  // 判断开始时间不能早于当前时间
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    // 判断是否两个时间都填写了
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      // 判断开始时间不能晚于结束时间
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        getlistlimit();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      // 表示两个时间填写了任意一个
      searchValue.value.page = 1;
      getlistlimit();
    }
  }
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    shopId: shopId,
    type: '',
    status: '',
    startAt: '',
    endAt: '',
    page: 1,
    rows: 10,
    complaintType: searchValue.value.complaintType,
  };
  getlistlimit();
  radio.value = '';
};
/**
 * 点击查看
 */
const lookMes = ref<any>();
const look = async (item: any) => {
  const a = await RequestComplaintGetDetail(item.id);
  lookMes.value = a.resultObj;
  complaint.value = true;
  mask.value = true;
  console.log('信息', lookMes.value);
};
/**
 * 点击申诉
 */
const appealShow = ref(false);
const appealMes = ref<any>({
  complaintId: '',
  type: '',
  reason: '',
  description: '',
  appealImgs: [],
  shopId: localStorage.getItem('ShopId'),
  appealSure: 0, //0店铺申诉，1用户申诉
});
const fileList1 = ref<any>([]);
const appeal = (item: any) => {
  appealShow.value = true;
  mask.value = true;
  appealMes.value.complaintId = item.id;
  appealMes.value.type = item.type;
};
/**
 * 提交申诉
 */
let time = ref();
const loading = ref(false);
const appealSure = () => {
  clearTimeout(time.value);
  loading.value = true;
  time.value = setTimeout(async () => {
    if (appealMes.value.reason == '' || appealMes.value.description == '') {
      ElMessage.error('请先完善所有信息！');
    } else {
      for (let i = 0; i < fileList1.value.length; i++) {
        appealMes.value.appealImgs[i] = await Base64(fileList1.value[i].raw);
      }
      console.log('111111111111111', appealMes.value);
      const a = await RequestAppealSave(appealMes.value);
      if (a.msg == '操作成功！') {
        ElMessage.success('申诉已提交');
        getlistlimit();
        loading.value = false;
      } else {
        ElMessage.success('申诉失败，请重试！');
        loading.value = false;
      }
    }
  }, 500);
};
const Base64 = (file: any) => {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let fileResult = '';
    reader.readAsDataURL(file);
    reader.onload = function () {
      fileResult = reader.result;
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.onloadend = function () {
      resolve(fileResult);
    };
  });
};
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  complaint.value = false;
  mask.value = false;
  appealShow.value = false;
  console.log('测试', fileList1.value);
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.complaint {
  width: 70%;
  height: 60%;
  background: #ffff;
  position: absolute;
  top: 10%;
  left: 15%;
  z-index: 9999;
}

.tab_ul {
  width: 90%;
  margin: 40px auto;

  .tab_li {
    display: flex;
    align-items: center;

    .tab_tit {
      width: 100px;
      height: 40px;
      font-size: 14px;
      color: #606266;
      background: #f5f7fa;
      border: 1px solid #e4e7ed;
      text-align: center;
      line-height: 40px;
      border-top: 0;
    }

    .especial::-webkit-scrollbar {
      display: none;
    }

    .tab_content {
      flex: 1;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #3d3d3d;
      border: 1px solid #e4e7ed;
      border-top: 0;
    }
  }
}

.appeal {
  width: 70%;
  height: 90%;
  background: #ffff;
  position: absolute;
  top: 0;
  left: 15%;
  z-index: 9999;
}

.table {
  height: calc(100% - 120px - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 50px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

::v-deep .el-step.is-center .el-step__description {
  padding: 0 !important;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-form-item :deep(.el-upload--picture-card) {
  height: 100px;
  width: 100px;
  opacity: 0;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

:deep(.el-overlay) {
  z-index: 40 !important;
  padding: static;
}

.close_order :deep(.is-finish .el-step__line) {
  background: #f57373;
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  z-index: initial !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
